import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 100
    }
  render() {
    return (
      <div>
        <h1>App -- {this.state.count}</h1>

        <button onClick={()=>{
            // 无法修改数据
            // this.state.count++

            console.log(111111111111);

            // setState 修改数据是一个异步的
            // 这里修改数据的时候是修改虚拟 DOM，没有更新真实 DOM
            this.setState({
                // 可以使用，但是相当于直接操作 this.state.count
                // count: this.state.count+=1
                // 这里不能使用，因为我们先用再加，会导致赋值的时候是上一次的值
                // count: this.state.count++
                // 可以使用，但是相当于直接操作 this.state.count
                // count: ++this.state.count
                // ***** 推荐写法
                count: this.state.count + 666

            }, ()=>{
                console.log(3333333333333);
                // 可以做真实 DOM 更新之后的操作
                // 所以该回调函数会在真实 DOM 更新之后来执行
            })

            console.log(222222222222);

        }}>点击增加</button>
      </div>
    )
  }
}
